<template>
  <n-menu
    :options="menuOptions"
    :default-expanded-keys="defaultExpandedKeys"
    @update:value="handleUpdateExpandedKeys"
  />
</template>

<script lang="ts" setup>
import type { Component } from 'vue'
import { h } from 'vue'
import { NIcon } from 'naive-ui'
import type { MenuOption } from 'naive-ui'
import { BookOutline as BookIcon, HomeOutline } from '@vicons/ionicons5'
import { useRouter } from 'vue-router'

function renderIcon(icon: Component) {
  return () => h(NIcon, null, { default: () => h(icon) })
}

const menuOptions: MenuOption[] = [
  {
    label: '首页',
    key: 'home',
    icon: renderIcon(HomeOutline)
  },
  {
    label: '库存管理',
    key: 'store',
    icon: renderIcon(BookIcon),
    children: [
      {
        label: '项目管理',
        key: 'storeProject'
      },
      {
        label: '物料管理',
        key: 'storeMaterial'
      }
    ]
  }
]
const defaultExpandedKeys = ['/']
// const message = useMessage()
const router = useRouter()

function handleUpdateExpandedKeys(keys: any[]) {
  // message.info(`[onUpdate:expandedKeys]: ${JSON.stringify(keys)}`)
  console.log(keys)
  console.log(router)
  // router.push(keys)
}
</script>
